Angular Material — Form Fields, Grid Lists, and Icons

Angular Material is a popular UI framework based on Material Design for Angular.

In this article, we’ll look at how to use Angular Material into our Angular project.

Form Fields

We can add form fields with the MatFormFieldModule .

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.componen.html

<div>
  <mat-form-field appearance="standard">
    <mat-label>Standard form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>home</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</div>

We imported the MatFormFieldModule , MatInputModule , and MatIconModule to add the form field with the input and icon.

mat-icon has the icon. matSuffix makes it show to the right of the input.

The appearance attribute sets the appearance type.

Grid List

We can add a grid list with the mat-grid-list component.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatGridListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

interface Tile {
  text: string,
  cols: number,
  rows: number,
  color: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tiles: Tile[] = [
    { text: 'One', cols: 3, rows: 1, color: 'lightblue' },
    { text: 'Two', cols: 1, rows: 2, color: 'lightgreen' },
    { text: 'Three', cols: 1, rows: 1, color: 'lightpink' },
    { text: 'Four', cols: 2, rows: 1, color: 'lightyellow' },
  ];
}

app.component.html

<div>
  <mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols"
      [rowspan]="tile.rows" [style.background]="tile.color">
      {{tile.text}}
    </mat-grid-tile>
  </mat-grid-list>
</div>

We add a grid with the with the mat-grid-list component.

Inside it, we add the mat-grid-tile with the tiles.

We set the colspan to set the column span.

rowspan sets the number of rows spanned.

style.background sets the background.

Icon

We can add icons with the mat-icon component.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <mat-icon>home</mat-icon>
</div>

We import the MatIconModule and add the mat-icon component to the template.

Conclusion

We can add form fields, grid lists, and icons with Angular Material.